<template>
<view>
	<auto-round startColor="#b5a80c">
		<own-card-title icon="icon-kefu1" title="我是店员" subTitle="请认真设置基础信息,以便BOSS知道你是谁"/>
	</auto-round>
	
	<view v-if="shop && shop.id" class="add-main">
		<view class="shop-name"><view class="title">{{shop.name}}</view><view class="sub-title">认真，是一种工作态度</view></view>
	
		<view v-if="worker && worker.id">
			<view class="label-group">
				<span class="label">姓名：</span><span class="value">{{worker.name}}</span>
			</view>
			<view class="label-group">
				<span class="label">电话：</span><span class="value">{{worker.phone}}</span>
			</view>
			<view class="label-group">
				<span class="label">创建时间：</span><span class="value">{{worker.createTime}}</span>
			</view>
			<view class="label-group">
				<span class="label">状态：</span><span class="value">{{worker.status==='1'?"正常":"未审核或被停用"}}</span>
			</view>
		</view>
		<view v-if="!worker || !worker.id">
			<view class="form-group">
				<view class="form-label">姓名</view>
				<input class="form-control" v-model="worker.name" maxlength="10" placeholder="请输入真实姓名"/>
			</view>
			<view class="form-group">
				<view class="form-label">电话</view>
				<input class="form-control" v-model="worker.phone" maxlength="11" type="number" placeholder="请输入手机号码"/>
			</view>
			<view class="save-btn">
				<button class="" @click="onSaveWorker" :disabled="hasSubmit" type="primary">{{hasSubmit?'已提交，等待审核':'确定提交'}}</button>
			</view>
		</view>
	</view>
</view>
</template>

<script>
var that;
export default {
	data() {
		return {
			shopId: 0,
			shop: {},
			worker: {},
			hasSubmit: false,
		}
	},
	onLoad(options) {
		that = this;
		const scene = decodeURIComponent(options.scene); //shop_1
		let id = options.id;
		if(!id) {
			id = scene.split("_")[1];
		}
		that.shopId = id;
		that.loadData();
	},
	methods: {
		loadData: function() {
			this.$request.get("/worker/onAddWorkerForWorker", {id: that.shopId}).then((res) => {
				console.log(res)
				that.shop = res.shop;
				if(res.worker) {
					that.worker = res.worker;
				}
			})
		},
		onSaveWorker: function() {
			const data = this.worker;
			if(!data.name || data.name.length<2) {
				this.$common.showNormalToast("姓名长度不能低于2")
			} else if(!data.phone || data.phone.length!=11) {
				this.$common.showNormalToast("请认真输入手机号码")
			} else {
				data.shopId = that.shopId;
				that.hasSubmit = true;
				this.$request.get("/worker/saveWorker", data, {method: "post"}).then((res) => {
					if(res.code==0) {
						that.hasSubmit = true;
						that.worker = res.data;
					} else {
						that.hasSubmit = false;
					}
				})
			}
		}
	}
}
</script>

<style lang="scss">
.add-main {
	background:#fdfdfd; border:1px #ddd solid; border-radius: 10rpx;
	box-shadow: 0px 0px 3px 3px #e0e0e0; margin-top: 40rpx;
	padding: 20rpx; width: calc(100% - 100rpx); margin-left: 30rpx; 
}

.shop-name {
	width: 100%; text-align: center; padding-bottom: 22rpx;
	
	.title {
		font-size: 40rpx; font-weight: bold; color:#555; padding-bottom: 20rpx;
	}
	.sub-title {
		font-size: 28rpx; color:#999; 
	}
}

.save-btn {
	margin: 40rpx 20rpx 20rpx 20rpx;
}
</style>
